<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }

        .el-dialog {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: 0 !important;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            max-height: calc(100% - 30px);
            max-width: calc(100% - 30px);
            width: 1500px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-title">安全管理台账,设备设施台账</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true" size="small">
                        <el-form-item label="" prop="startTime">
                            <el-col :span="11">
                                <el-date-picker type="date" placeholder="开始时间" v-model="startTime"
                                                value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                            </el-col>
                            <el-col class="line" :span="2">-</el-col>
                            <el-col :span="11">
                                <el-date-picker type="date" placeholder="结束时间" v-model="endTime"
                                                value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button type="primary" @click="addBtn">查看月报信息</el-button>
                            <!--<el-button type="success" @click="export_report">导出</el-button>-->
                            <!--                            <el-button type="warning" @click="search">导出特种设备信息</el-button>-->
                            <!--                            <el-button type="primary" @click="search">导入</el-button>-->
                        </el-form-item>
                    </el-form>
                </div>
                <el-table :data="tableData" height="660" :stripe="true" :border="true" size="mini" style="width: 100%">
                    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                    <el-table-column prop="manager" label="填表人"></el-table-column>
                    <el-table-column prop="phone" label="联系电话"></el-table-column>
                    <el-table-column prop="month" label="月份"></el-table-column>
                    <el-table-column prop="createTime" label="上报时间">
                        <template slot-scope="scope">
                            {{scope.row.createTime.replace('T',' ')}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <!--<el-button @click="editClick(scope.row)" round size="small" icon="el-icon-edit"></el-button>-->
                            <!--<el-button icon="el-icon-delete" round size="small"-->
                            <!--@click="removeItem(scope.row.Id)"></el-button>-->
                            <el-button type="primary" @click="addcheck(scope.row)" size="small">
                                查看
                            </el-button>
                            <!--<el-button type="primary" @click="checkdata(scope.row.Id)" size="small">-->
                            <!--删除-->
                            <!--</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page-footer">
                    <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                                   :current-page.sync="pageno" @current-change="onChangePage">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
        <el-dialog :title="editMod?'编辑台账':'查看月报信息'" :visible.sync="dialogFormVisible">
            <div>
                <div align="center">
                    <font size="5">市教育系统安全工作月报表
                    </font>
                </div>
                <div align="left" style="margin:10px">
                    填报单位：
                    <el-input v-model="param.projectName" autocomplete="off" class="itemW" :disabled="true"></el-input>

                    单位负责人：
                    <el-input v-model="param.manager" autocomplete="off" class="itemW" :disabled="true"></el-input>

                    年份：
                    <el-input v-model="param.year" autocomplete="off" class="itemW" :disabled="true"></el-input>

                    月份：
                    <el-input v-model="param.month" autocomplete="off" class="itemW" :disabled="true"></el-input>
                </div>

                <table class="cTable vLine2" cellpadding="0" cellspacing="0">
                    <tbody>
                    <tr>
                        <td class="bg-light-blue2" colspan="4" align="center" title="安全事故情况"><b>安全事故情况</b></td>
                    </tr>
                    <tr>
                        <td title="发生事故（起）">发生事故（起）<span class="star"></span></td>
                        <td title="伤（人）">伤（人）<span class="star"></span></td>
                        <td title="亡（人）">亡（人）<span class="star"></span></td>
                        <!--<td title="事故发生时间">事故发生时间<span class="star"></span></td>-->
                    </tr>
                    <tr>
                        <td title="">
                            <el-input v-model="param.accidentTotal" autocomplete="off" class="itemW"
                                      :disabled="true"></el-input>
                        <td title="">
                            <el-input v-model="param.accidentInjuredSum" autocomplete="off" class="itemW"
                                      :disabled="true"></el-input>
                        </td>
                        <td title="">
                            <el-input v-model="param.accidentDeathSum" autocomplete="off" class="itemW"
                                      :disabled="true"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td class="bg-light-blue2" colspan="4" align="center" title="隐患排查治理情况"><b>隐患排查治理情况</b></td>
                    </tr>
                    <tr>
                        <td title="排查隐患（项）">排查隐患（项）<span class="star"></span></td>
                        <td title="已整改（项）">已整改（项）<span class="star"></span></td>
                        <td colspan="2" title="整改率（%）">整改率（%）<span class="star"></span></td>
                    </tr>
                    <tr>
                        <td title="">
                            <el-input v-model="param.hiddenTotal" autocomplete="off" class="itemW"
                                      :disabled="true"></el-input>
                        <td title="">
                            <el-input v-model="param.hiddenProcessedSum" autocomplete="off" class="itemW"
                                      :disabled="true"></el-input>
                        </td>
                        <td colspan="2" title="">
                            <el-input v-model="param.hiddenRate" autocomplete="off" class="itemW"
                                      :disabled="true"></el-input>
                    </tr>
                    <tr>
                        <td class="bg-light-blue2" colspan="4" align="center" title="隐患情况"><b>隐患情况</b></td>
                    </tr>
                    <tr>
                        <td title="隐患名称">隐患名称</td>
                        <td title="是否已整改">是否已整改</td>
                        <td title="整改时间">整改时间</td>
                        <td title="整改责任人">整改责任人</td>
                    </tr>
                    <tr v-if="hiddenList" v-for="item in hiddenList">
                        <td>{{item.wf_eventName}}</td>
                        <td>
                            <template v-if="item.wf_processflag==0">
                                未整改
                            </template>
                            <template v-if="item.wf_processflag==2">
                                已整改
                            </template>
                        </td>
                        <td>{{item.wf_processtime.replace('T','')}}</td>
                        <td>{{item.userName}}</td>
                    </tr>
                    <tr v-if="!hiddenList">
                        <td colspan="4" title="本月没有上报隐患">本月没有上报隐患</td>
                    </tr>
                    </tbody>
                </table>

                <div class="alert alert-warning alert-dismissable">
                    <strong>备注：</strong>1、上报数据调整为系统自动统计，不能修改，点击确认提交即可；<br>
                    <strong>数据统计对应关系：</strong>1、安全事故情况统计数据来源于安全事故管理栏目
                    2、隐患排查治理情况、隐患情况统计数据来源于隐患上报栏目3、安全教育情况统计数据来源于安全教育管理栏目。
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitReport()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script>
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            dialogFormVisible: false,
            formLabelWidth: '120px',
            currentPage: 1,
            startTime: '',
            endTime: '',
            dialogFormVisible: false,
            dialogcheckVisible: false,
            dialogcheckdataVisible: false,
            param: {},
            pagesize: 10,
            pageno: 1,
            totalCount: 0,
            tableData: [],
            editMod: false,
            startTime: '',
            endTime: '',
            hiddenList: []
        },
        created: function () {

            $('.page').show();
            // SiteConfig.account.projiectNo
            this.loadData4();

        },
        methods: {
            addcheck(row) {
                this.dialogFormVisible = true;
                this.loadData3(row.year, row.month);
            },
            loadData: function (year, month) {
                var param = {};
                param.year = year;
                param.month = month;
                HttpUtil.get('SchoolSafeAccident/safemonthreport', param).success((r) => {
                    this.$set(this.param, 'accidentTotal', r.data[0].accidentTotal);
                    this.$set(this.param, 'accidentInjuredSum', r.data[0].accidentInjuredSum);
                    this.$set(this.param, 'accidentDeathSum', r.data[0].accidentDeathSum);
                    this.$set(this.param, 'hiddenProcessedSum', r.data[0].hiddenProcessedSum);
                    this.$set(this.param, 'hiddenTotal', r.data[0].hiddenTotal);
                    this.$set(this.param, 'hiddenRate', r.data[0].hiddenRate);
                });
            },
            loadData2: function (year, month) {
                var param = {};
                param.projectNo = SiteConfig.account.projectNo;
                param.year = year;
                param.month = month;
                HttpUtil.get('SchoolSafeAccident/safemonthreporthiddenList', param).success((r) => {
                    if (r.state == 0) {
                        this.hiddenList = r.data;
                    }
                });
            },
            loadData3: function (year, month) {
                if (!year) {
                    year = new Date().getFullYear();
                }
                if (!month) {
                    month = new Date().getMonth() + 1;
                }
                HttpUtil.get('Project/List', {projectNo: SiteConfig.account.projectNo}).success((r) => {
                    if (r.state == 0) {
                        // this.param.projectName = r.data[0].projectName;
                        // this.param.manager = r.data[0].manager;
                        // this.param.year = new Date().getFullYear();
                        // this.param.month = new Date().getMonth() + 1;
                        this.$set(this.param, 'projectName', r.data[0].projectName);
                        this.$set(this.param, 'manager', r.data[0].manager);
                        this.$set(this.param, 'phone', r.data[0].phone);
                        this.$set(this.param, 'year', year);
                        this.$set(this.param, 'month', month);
                        this.loadData(year, month);
                        this.loadData2(year, month);
                    } else {
                        vuePage.$message({type: 'error', message: '修改失败'})
                    }
                })
            },
            loadData4: function () {
                var param = {};
                if (this.startTime)
                    param.startTime = this.startTime;
                if (this.endTime)
                    param.endTime = this.endTime;
                if (SiteConfig.account.projectNo)
                    param.projectNo = SiteConfig.account.projectNo;
                param.pageno = this.pageno;
                param.pagesize = this.pagesize;
                HttpUtil.get('SchoolSafeMonthReprot/List', param).success((res) => {
                    if (res.state == 0) {
                        vuePage.tableData = res.data;
                        vuePage.totalCount = res.total;
                    }
                    else {
                        this.$message(res.errMsg);
                    }
                });
            },
            addBtn: function () {
                this.editMod = false;
                this.param = {};
                this.dialogFormVisible = true;
                this.loadData3();
            },
            submitReport() {
                var param = {};
                param.projectNo = SiteConfig.account.projectNo;
                param.manager = this.param.manager;
                param.phone = this.param.phone;
                param.year = this.param.year;
                param.month = this.param.month;
                HttpUtil.get('SchoolSafeMonthReprot/Add', param).success((r) => {
                    if (r.state == 0) {
                        this.$message({
                            message: '添加成功！',
                            type: 'success'
                        });
                        vuePage.loadData4();
                        setTimeout(function () {
                            vuePage.dialogFormVisible = false;
                        }, 1000)
                    } else {
                        vuePage.$message({type: 'error', message: '添加失败'})
                    }
                })

            },
            onChangePage(page) {
                this.pageno = page;
                this.loadData4();
            },
            search: function () {
                this.loadData4();
            }
        },

        mounted: function () {

        }
    });
</script>
</body>
</html>
